/**
 * Created by huotaol on 2018/1/11.
 */
import {Button, DatePicker, Form, Input, Select} from "antd";
import React from "react";
import {connect} from "react-redux";
import {fetchData, receiveData} from "@/action";
import {get} from "@/axios/tools";
import {bindActionCreators} from "redux";
import TableContainer from "../tables/TableContainer";

const {MonthPicker, RangePicker} = DatePicker;
const FormItem = Form.Item;
const Option = Select.Option;
const DEFAULT_PAGE_SIZE = 15;
const FORMAT_DATE = 'YYYY-MM-DD';


class LogOrderRecordList extends React.Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
        this.columns = [
            {title: '用户', dataIndex: 'user'}
            , {title: '操作', dataIndex: 'methodDescription'}
            , {
                title: '状态',
                dataIndex: 'logType',
                render: (text) => 'EXCEPTION' === text ? <span style={{color: 'red'}}>异常</span> : "成功"
            }
            , {title: '操作时间', dataIndex: 'createTime'}
            , {title: '订单编号', dataIndex: 'orderNum'}
        ];
    }

    componentDidMount() {
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.submit();
    };

    submit() {
        this.props.form.validateFields((err, values) => {
            if (!err) {
                this.table.reset();
            }
        });
    }

    _requestData = (page, pageSize) => {
        const {getFieldsValue} = this.props.form;
        let {time, ...data} = getFieldsValue();
        if (time && time.length) {
            data = {
                ...data,
                start: time[0].format(FORMAT_DATE),
                end: time[1].format(FORMAT_DATE),
            }
        }
        data = {page, pageSize, ...data};
        return get('/log/list', data);
    };


    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <div className="content-container">
                <Form layout="inline" onSubmit={this.handleSubmit}>
                    <FormItem
                        label={'结算员用户'}
                    >
                        {getFieldDecorator('userName', {})(
                            <Input/>
                        )}
                    </FormItem>
                    <FormItem
                    >
                        {getFieldDecorator('time', {})(
                            <RangePicker  />
                        )}
                    </FormItem>
                    <FormItem>
                        <Button
                            type="primary"
                            htmlType="submit"
                        >
                            搜索
                        </Button>
                    </FormItem>
                </Form>
                <div className="space-bar"></div>
                <TableContainer callBack={ref => this.table = ref} columns={this.columns} pageSize={DEFAULT_PAGE_SIZE}
                                requestData={this._requestData}/>
            </div>

        );
    }
}

const mapStateToPorps = state => {
    const {auth} = state.httpData;
    return {auth};
};
const mapDispatchToProps = dispatch => ({
    fetchData: bindActionCreators(fetchData, dispatch),
    receiveData: bindActionCreators(receiveData, dispatch)
});


export default connect(mapStateToPorps, mapDispatchToProps)(Form.create()(LogOrderRecordList));
